<template>
<div>
  <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" width="500px">
    <el-form :model="form">
      <el-form-item label="设备型号" :label-width="formLabelWidth">
        <el-input v-model='form.dsDeviceModel' placeholder="如：esp32" style="width: 200px" disabled></el-input>
      </el-form-item>
      <el-form-item label="安装位置" :label-width="formLabelWidth">
        <el-input v-model='form.dsDeviceAddr' placeholder="如：前门" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="所属场所" :label-width="formLabelWidth">
        <el-select v-model="form.dsAreaId" placeholder="--请选择场所--">
          <el-option v-for="one in areas" :value="one.dsAreaId" :key="one.dsAreaId" :label="one.dsAreaName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="MAC地址" :label-width="formLabelWidth">
        <el-input v-model="form.dsDeviceMac" placeholder="如：48-E7-DA-54-EE-AF" disabled></el-input>
      </el-form-item>
      <el-form-item label="固件版本" :label-width="formLabelWidth">
        <el-input v-model="form.dsDeviceFirmware" placeholder="如：" style="width: 200px" disabled></el-input>
      </el-form-item>
      <el-form-item label="设备类型" :label-width="formLabelWidth">
        <el-select v-model="form.dsTypeId" placeholder="--请选择设备类型--" multiple>
          <el-option v-for="one in types" :value="one.dsTypeId" :key="one.dsTypeId" :label="one.dsTypeName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" :label-width="formLabelWidth" >
        <el-input v-model="form.dsDeviceStatus" placeholder="如：" style="width: 200px"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="editHandler()">确 定</el-button>
    </div>
  </el-dialog>
  <el-table :data="tableData"
             border
             style="width: 100%">
    <el-table-column
        type="selection" v-if="true">
    </el-table-column>
    <el-table-column
        label="Mac地址"
        prop="dsDeviceMac">
    </el-table-column>
    <el-table-column
        label="设备型号"
        prop="dsDeviceModel">
    </el-table-column>
    <el-table-column
        label="设备版本"
        prop="dsDeviceFirmware">
    </el-table-column>
    <el-table-column label="上电状态" prop="dsDeviceStatus">
      <template slot-scope="scope">
        <el-switch
            @change="changeSwitch(scope.row)"
            :value="scope.row.dsDeviceStatus === 1 "
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
  </el-pagination>
</div>
</template>
<script>
import store from "@/App";

export default {
  name: "Downdevice",
  data() {
    return {
      form: {
        dsDeviceModel:null,
        dsDeviceMac:null,
        dsDeviceAddr:null,
        dsDeviceDisable:null,
        dsDeviceFirmware:null,
        dsAreaId:{
          createTime: null,
          deleted: null,
          dsAreaId: null,
          dsAreaName: null,
          dsAreaNote: null,
          modifyTime: null
        },
        dsTypeId: null,
        createTime:null,
        modifyTime:null,
        deleted:null,
        dsDeviceId:null,
        dsDeviceStatus:null
      },
      item: {
        dsDeviceModel: null,
        dsDeviceMac: null,
        dsDeviceAddr: null,
        dsDeviceDisable: null,
        dsDeviceFirmware: null,
        dsAreaId:{
          createTime: null,
          deleted: null,
          dsAreaId: null,
          dsAreaName: null,
          dsAreaNote: null,
          modifyTime: null
        },
        dsTypeId: [this.type],
        createTime: null,
        modifyTime: null,
        deleted: null,
        dsDeviceId: null,
        dsDeviceStatus: null
      },
      tableData: [
        this.item
      ],
      area: {
        createTime: null,
        deleted: null,
        dsAreaId: null,
        dsAreaName: null,
        dsAreaNote: null,
        modifyTime: null
      },
      areas: [
        this.area
      ],
      type: {
        createTime: null,
        deleted: null,
        dsTypeId: null,
        dsTypeName: null,
        modifyTime: null
      },
      types: [
        this.type
      ],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formTitle: '新增',
      // pageTotal: 0,
      currentPage: 1,
      pageSize: 5,
      searchValue: '',
      activeName: 'role',
      status:false
    }
  },
  methods: {
    editHandler: function () {
        this.editDevice(this.form)
    },
    cancel() {
      this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
      this.dialogFormVisible = false
    },
    editDevice:function (data) {
      this.api.deviceApi.updateDevice(data)
          .then(()=>{
            this.disableDevice(data)
            this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
          })
          .catch((error)=>{
            this.$notify.error({
              title: '失败',
              message: '信息：' + error
            })
            console.log(error)
          })
      this.dialogFormVisible = false
    },
    itypes(items) {
      let s = "";
      items.dsTypeId.forEach(type => {
        s += type.dsTypeName + " "
      })
      return s
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
    },
    selectCurrentPageDevice: function (page, pageSize, name) {
      this.api.deviceApi.getList(page, pageSize, name).then((response) => {
        console.log(response)
        this.tableData = response[0]
        console.log(this.tableData)
        this.pageTotal = response[1]
      }).catch((error) => {
        this.tableData = error
      })
    },
    disableDevice: function (data) {
      if (data.dsDeviceStatus === 1) {
        data.dsDeviceStatus = !(data.dsDeviceStatus)
      } else {
        data.dsDeviceStatus = 1
      }
      this.api.deviceApi.change(data)
          .then(() => {
            this.$notify({
              title: '成功',
              message: '第' + data.dsDeviceId + '个设备上电成功',
              type: 'success'
            })
            this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
          })
          .catch((error) => {
            data.dsDeviceStatus = 1
            this.$notify.error({
              title: '失败',
              message: '信息：' + error
            })
          })
    },
    edit:function (data) {
      this.item = data
      this.form = data
      this.dialogFormVisible = true
      this.formTitle = '添加设备'
    },
    changeSwitch: function (data) {
      // this.form=data
      // this.item=data
      if (data.dsAreaId) data.dsAreaId = data.dsAreaId.dsAreaId
      if (data.dsTypeId) {
        let arr = []
        data.dsTypeId.forEach(type => {
          arr.push(type.dsTypeId)
        })
        data.dsTypeId = arr
      }
      this.$confirm('确认要此设备上电"' , "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success"
      }).then(() => {
        this.edit(data)
      }).catch(()=>{
        this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
      this.tableData.dsDeviceStatus= this.tableData.dsDeviceStatus !== true;
      });
    },
  },
  mounted() {
    this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
    this.api.areaApi.selectAreas()
        .then(res => {this.areas = res})
        .catch(error => {console.log(error)})
    this.api.typeApi.selectTypes()
        .then(res => {this.types = res})
        .catch(err => {console.log(err)})

  },
}
</script>
